<!--首页-->
<template>
  <div>
    <!--首页轮播图的内容-->
   <Carousel></Carousel>
    <!--首页搜索医院的表单区域-->
    <Search></Search>
    <!--底部展示医院的结构-->
    <el-row gutter="20">
      <el-col :span="20">
        <!--等级子组件-->
        <Level @getLevel="getLevel" ></Level>
        <!--地区子组件-->
        <Region @getRegion="getRegion" ></Region>
        <!--地展示医院的结构-->
        <div class="hospital" v-if="hasHospitalArr.length>0" >
          <Card class="item" v-for="(item,index) in hasHospitalArr" :key="index" :hospitalInfo="item" />
        </div>
        <el-empty v-else description="当前选择的类型或地区没得相关医院"></el-empty>
        <!--分页器-->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="sizes, prev, pager, next, jumper,total, "
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
        />
      </el-col>
      <el-col :span="4">
        <Tip></Tip>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqHospital} from "@/api/home";
//引入首页轮播图组件
import Carousel from "@/views/home/carousel/index.vue";
//引入首页搜索组件
import Search from "@/views/home/search/index.vue";
//引入首页等级组件
import Level from "@/views/home/level/index.vue";
//引入首页地区组件
import Region from "@/views/home/region/index.vue";
//引入首页展示医院的卡片组件
import Card from "@/views/home/card/index.vue";
//引入右侧组件
import Tip from "@/views/home/tip/index.vue"
//引入ts类型
import type {Content,HospitalResponseData} from "@/api/home/type.ts";
//翻页器默认页码/当前处在第几页
let pageNo = ref<number>(1);
//一页展示多少条数据
let pageSize = ref<number>(10);
//存储已有的医院数据
let hasHospitalArr = ref<Content>([]);
//存储医院总个数
let total = ref<number>(0);
//存储医院等级响应的数据
let hostype = ref<string>("");
//存储医院的地区
let districtCode = ref<string>("");
// 组件挂载完毕:发一次请求
onMounted(()=>{
  getHospitalInfo();
});
// 获取医院的数据:默认获取第一页,一页十个医院的数据
const getHospitalInfo = async () => {
  //获取医院 的数据:默认获取第一页,一页十个医院的数据
  let result:HospitalResponseData = await reqHospital(pageNo.value,pageSize.value,hostype.value,districtCode.value)
  if (result.code === 200) {
    //保存请求到的已有医院数据
    hasHospitalArr.value = result.data.content;
    //保存医院的总个数
    total.value = result.data.totalElements;
  }
}
//翻页器页码发生变化的时候回调
const currentChange = () => {
  getHospitalInfo();
};
//分页器下来菜单发生变化的时候出发
const sizeChange = () => {
  getHospitalInfo();
};

//自定义事件:子组件点击等级的时候触发
const getLevel = (level: string) => {
  //收集等级的参数
  hostype.value = level;
  getHospitalInfo();
};

//自定义事件:子组件点击地区的时候触发
const getRegion = (region: string) => {
  //收集地区的参数
  districtCode.value = region;
  getHospitalInfo();
};

</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
